import { RedoOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Card, Col, Divider, Progress, Row, Statistic } from 'antd';
import { useTranslation } from 'react-i18next';
import { useSnapshot } from 'valtio';

import { userProxy } from '@/store/userStore';
import { resetVulnerable } from '@/store/vulnerableStore';
import { vulnerableProxy } from '@/store/vulnerableStore';
import messageBox from '@/utils/messageBox';

import UserActions from './UserActions';
const { Meta } = Card;

const UserCard = () => {
  const { t } = useTranslation();
  const userSnap = useSnapshot(userProxy);
  const vulnerableSnap = useSnapshot(vulnerableProxy);

  return (
    <Card actions={UserActions()} cover={<img src={userSnap?.background} />}>
      <Meta
        avatar={
          <Avatar
            className="inline-flex justify-center items-center"
            shape="square"
            icon={<UserOutlined />}
            src={userSnap.avatar}
          />
        }
        title={userSnap.username}
      />
      <Divider />
      <Row className="mt-6" gutter={16}>
        <Col span={24}>
          <Statistic
            title={
              <>
                Passed
                <RedoOutlined
                  className="ml-2"
                  onClick={() => {
                    resetVulnerable();
                    messageBox.success({ content: t('vulnerableReset') });
                  }}
                />
              </>
            }
            value={vulnerableSnap.passed}
            suffix="/ 15"
          />
        </Col>
        <Col span={24}>
          <Progress
            className="mt-3"
            percent={(vulnerableSnap.passed / 15) * 100}
            size="default"
            status="active"
            showInfo={false}
          />
        </Col>
      </Row>
    </Card>
  );
};

export default UserCard;
